<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="js/swiper.min.js" charset="UTF-8"></script>
    <script src="js/global.js" charset="UTF-8"></script>
    <script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
    <title>农资商贸销售系统</title>
</head>
<body>

<!-- 顶部tab -->
<div th:replace="~{mall/common :: header}"></div>

<!-- 搜索栏 -->
<div th:replace="~{mall/common :: topSearch}"></div>

<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="user-content__box clearfix bgf">
            <div class="title">商品评价<span class="red"
                                             th:text="${'下单时间：'+ orderTime + '订单号：'+ order.orderid}"></span>
                <span style="display: none;" id="orderid" th:text="${order.id}"></span></div>
            <form class="shopcart-form__box">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th width="150">
                            <label class="checked-label"><input type="checkbox" class="check-all"><i></i> 全选</label>
                        </th>
                        <th width="300">商品信息</th>
                        <th width="150">单价</th>
                        <th width="200">数量</th>
                        <th width="200">合计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="orderdetail : ${orderdetailList}" th:data-id="${orderdetail.id}">
                        <th scope="row">
                            <label class="checked-label"><input type="checkbox"><i></i>
                                <div class="img"><img th:src="${orderdetail.img}" th:alt="${orderdetail.goodsname}"
                                                      class="cover"></div>
                            </label>
                        </th>
                        <td>
                            <div class="goodis-id" style="display: none;" th:text="${orderdetail.goodsid}"></div>
                            <div class="name ep3" th:text="${orderdetail.goodsname}"></div>
                            <div class="type c9" th:text="${orderdetail.describe}"></div>
                        </td>
                        <td th:text="${'¥'+orderdetail.goodsprice}"></td>
                        <td>
                            <div class="cart-num__box">
                                <input disabled type="number" class="val" th:value="${orderdetail.num}"
                                       th:maxlength="2">
                            </div>
                        </td>
                        <td th:text="${'¥'+orderdetail.sumprice}"></td>
                    </tr>
                    </tbody>
                </table>
                <div class="user-form-group tags-box shopcart-submit pull-right">
                    <button type="button" onclick="submitEvaluation()" class="btn">提交评价</button>
                </div>
                <div class="checkbox shopcart-total">
                    <label>请选择商品进行评价</label>
                    <label><input name="anonymous" type="checkbox"> 匿名评价</label>
                    <label><input type="number" value="1" id="score" name="score" min="1" max="10"> 商品评分</label>
                </div>
                <div class="checkbox shopcart-total">
                    <textarea class="form-control" rows="3" placeholder="对商品的评价"></textarea>
                </div>
                <script>

                    //提交评价
                    function submitEvaluation() {
                        //获取选中的数据
                        let selectedItems = $('.shopcart-form__box tbody input[type="checkbox"]:checked');
                        if (selectedItems.length === 0) {
                            alert("请先选中数据");
                            return false;
                        } else {
                            let ids = [];
                            selectedItems.each(function () {
                                ids.push(Number($(this).closest('tr').find('.goodis-id').text()));
                            });

                            //获取是否勾选匿名评价
                            let state = $('input[name="anonymous"]').is(':checked') ? 2 : 1;
                            //获取评价的内容
                            let content = $('textarea').val();
                            if (!content) {
                                alert("请填写评价内容");
                                return false;
                            }
                            //获取评价的分数
                            let score = $('#score').val();
                            //分数只允许输入正整数
                            if (!/^\d+$/.test(score)) {
                                alert("评价的分数请输入正整数");
                                return false;
                            }
                            score=parseInt(score);
                            //获取订单id
                            let orderid = $('#orderid').text();

                            //发起请求对商品进行评价
                            $.ajax({
                                url: 'evaluation/add',
                                type: 'POST',
                                data: {ids, state, content, score, orderid},
                                success: function (res) {
                                    if (res.code === 200) {
                                        DJMask.open({
                                            width: "300px",
                                            height: "100px",
                                            content: res.msg
                                        })
                                        //倒计时一秒刷新当前页面
                                        setTimeout(function () {
                                            window.location.href = '/mall/userOrder'
                                        }, 1000);
                                    } else if (res.code === 401) {
                                        DJMask.open({
                                            width: "300px",
                                            height: "100px",
                                            content: res.msg + "，将在三秒后自动跳转到登录页面"
                                        })
                                        //倒计时三秒跳转到登录页面
                                        setTimeout(function () {
                                            window.location.href = "/mall/login";
                                        }, 3000);
                                    } else {
                                        DJMask.open({
                                            width: "300px",
                                            height: "100px",
                                            content: res.msg
                                        })
                                    }
                                },
                                error: function () {
                                    alert("服务器异常");
                                }
                            });
                        }
                    }

                    $(document).ready(function () {
                        var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]'),
                            $check_all = $('.check-all');
                        // 全选
                        $check_all.on('change', function () {
                            $check_all.prop('checked', $(this).prop('checked'));
                            $item_checkboxs.prop('checked', $(this).prop('checked'));
                        });
                        // 点击选择
                        $item_checkboxs.on('change', function () {
                            var flag = true;
                            $item_checkboxs.each(function () {
                                if (!$(this).prop('checked')) {
                                    flag = false
                                }
                            });
                            $check_all.prop('checked', flag);
                        });

                        // checkbox change事件
                        $('.shopcart-form__box tbody input[type="checkbox"]').change();

                    });
                </script>
            </form>
        </div>
    </section>
</div>

<!-- 右侧菜单 -->
<div th:replace="~{mall/common :: rightNav}"></div>
<!-- 底部信息 -->
<div th:replace="~{mall/common :: footer}"></div>
</body>
</html>